<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue虚拟dom</title>

    <style>
        .dom{
            background-color: greenyellow;
        }

        .item{
            color: hotpink;
        }
    </style>
</head>
<body>

    <!-- 

     -->

    <div id="dom" class="dom">
        <div>这是真实的DOM</div>
        <ul>
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
        </ul>
    </div>

    <script>
        
        // 操作dom的常用方法




        function Element(tagName, props, children){
            console.log("function Element",this)
            if(!Element[Symbol.hasInstance](this)){
                console.log("ERROR")
                return;
            }
            // 这个自身就是构造函数
            console.log("OK")

            // if(!(this instanceof Element)){
            // }
        }

        // const vdom = Element()



    </script>
    
</body>
</html>